為什麼要用Lodash

Vue是前端框架，因此會大量的處理字串與陣列或是物件，通常大部分人都會使用prototype fucntion，而改使用lodash提供的方法，可以讓程式碼更佳的簡潔及好維護！

下面列出較常使用的Lodash Methods

Array

• findIndex：判斷陣列中的元素，並且回傳索引值，找不到就會回傳-1

  _.findIndex(array, [predicate=.identity], [fromIndex=0])

  let city = [
  	{ 'counties': '臺北市', 'active': true },
  	{ 'counties': '新北市', 'active': false },
  	{ 'counties': '基隆市', 'active': true }
  ]
  
  _.findIndex(city, function(e) { 
  	return e.counties == '新北市'
  })
  // => 1
  
  _.findIndex(city, { 'counties': '臺北市' })
  // => 0
  
  _.findIndex(city, ['active', false])
  // => 1
  
  _.findIndex(city, 'active')
  // => 2
  

• indexOf：尋找陣列中value的索引值位置，找不到就會回傳-1

  _.indexOf(array, value, [fromIndex=0])

  _.indexOf([23, 123, 22, 123], 123)
  // => 2
  
  _.indexOf([23, 123, 22, 123], 2, 23)
  // => -1
  

• last：拿到陣列中最後一個元素

  _.last(array)

  _.last(['A', 'D', 'E'])
  // => 'E'
  

• remove：移除陣列中指定的元素，並且要賦予新的變數

  .remove(array, [predicate=.identity])

  let array = [1, 2, 3]
  let evens = _.remove(array, function(n) {
    return n % 3 == 0;
  });
  
  console.log(array);
  // => [1, 2]
  
  console.log(evens);
  // => [3]
  

• slice：搜尋陣列中全部元素的範圍，預設值從0開始，可設定搜尋範圍

  _.slice(array, [start=0], [end=array.length])

  _.slice([1, 2, 3, 5])
  // => [1, 2, 3, 5]
  
  _.slice([1, 2, 3, 5], 0, 3)
  // => [1, 2, 3]
  
  _.slice([1, 2, 3, 5], 2)
  // => [3, 5]
  

Object

• assign：指派經塞選後的值到新Object上

  _.assign(object, [sources])

  function new1() {
    this.a = 123;
  }
  
  function new2() {
    this.b = 456;
  }
  
  _.assign({ 'a': 0 }, new new1, new new2);
  // => { 'a': 123, 'b': 456 }
  

• findKey：判斷Object中，有符合的條件，並且回傳key

  _.findKey(object, [predicate=.identity])

  let users = {
  	'Ming': { 'age': '31', 'active': true },
  	'Eric': { 'age': '34', 'active': false },
  	'Tom': { 'age': '21', 'active': true }
  }
  
  _.findKey(users, function(e) { 
  	return e.age < 30
  })
  // => 'Tom'
  
  _.findKey(users, { 'age': '31', 'active': true })
  // => 'Ming'
  
  _.findKey(users, ['active', false])
  // => 'Eric'
  
  _.findKey(users, 'active')
  // => 'Ming'
  

• mapKeys：尋找Object的key與value

  _.mapKeys(object, [iteratee=.identity])

  _.mapKeys({ 'A': 10, 'C': 13 }, function(value, key) {
    return key + value
  })
  // => { 'A10': 10, 'C13': 13 }
  

• omit：找出物件中以外的key

  _.omit(object, [props])

  let object = { 'A': 33, 'B': 44, 'C': 55 };
  
  _.omit(object, ['B', 'C']);
  // => { 'A': 33 }
  

• pick：找出物件中的key

  _.pick(object, [props])

  let object = { 'A': 33, 'B': 44, 'C': 55 };
  
  _.omit(object, ['B', 'C']);
  // => { 'B': 44, 'C': 55 }
  

Collection

• map：集合陣列或物件，額外執行的事件

  _.map(collection, [iteratee=.identity])

  function add(n) {
    return n++;
  }
  
  _.map([2, 6], add);
  // => [4, 36]
  
  var users = [
    { 'user': 'Amy' },
    { 'user': 'John' }
  ];
  
  _.map(users, 'user');
  // => ['Amy', 'John']
  

• includes：檢查陣列或物件，有沒有找到value，並且回傳布林值

  _.includes(collection, value, [fromIndex=0])

  _.includes([1, 4, 3], 4);
  // => false
  
  _.includes([1, 4, 3], 4, 1);
  // => true
  
  _.includes({ 'user': 'Ming', 'age': 32 }, 32);
  // => true
  
  _.includes('2d23ff3d4', 'ff');
  // => true
  

接下來的實作都會用Lodash方法來實作，有不知道的用法可以來這篇回味一下～

Resource
Lodash Docs
Lodash - JS 實用工具函式庫